<template>
  <div class="user-normal-info-wrapper">
    <h2>基本信息</h2>

    <ul class="user-info-list">
      <li v-for="(key, idx) in userRandomInfoKeys" :key="idx">
        <p>{{ infoMap.get(key) }} :</p>
        <sign-input
          :sign="userBaseInfos[key]"
          :defaultSign="infoPlaceholderMap.get(key)"
          @change="renewInfo($event, key)"
          class="sign-input"
        ></sign-input>
      </li>

      <li v-for="(key, idx) in userSelectInfoKeys" :key="idx">
        <p>{{ infoMap.get(key) }} :</p>
        <item-select
          class="item-select"
          :items="selectInfoItemListMap.get(key)"
          :item="item(key)"
          :placeholder="infoPlaceholderMap.get(key)"
          @selectItem="renewInfo($event, key)"
        ></item-select>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { mapGetters, mapState } from 'vuex'
import SignInput from '@/components/utils/Input/SignInput.vue'
import ItemSelect from '@c/utils/Input/ItemSelect.vue'
import { UserStateLogin, useUserStore } from '@/store/user'
import { computed } from 'vue'

const infoMap = new Map([
  ['username', '用户名'],
  ['avatar', '头像'],
  ['nickname', '昵称'],
  ['sex', '性别'],
  ['sign', '格言'],
  ['birthday', '生日'],
  ['location', '住址'],
  ['education', '文凭'],
  ['university', '大学'],
  ['direction', '主攻方向'],
  ['email', '邮箱'],
  ['userpwd', '密码'],
])

const infoPlaceholderMap = new Map([
  ['username', 'NoName'],
  ['avatar', '头像'],
  ['nickname', '小可爱'],
  ['sex', '你是雌性还是雄性？'],
  ['sign', '写下你的格言吧！'],
  ['birthday', '你在哪一天出生呢？'],
  ['location', '你住在哪里呢？'],
  ['education', '你的文凭是什么呢？'],
  ['university', '你毕业于哪所大学呢？'],
  ['direction', '主攻方向'],
  ['email', '邮箱'],
  ['userpwd', '密码'],
])

const userSotre = useUserStore()
const userBaseInfos = userSotre.userBaseInfos!

function renewInfo(e: string, key: string) {
  if (key === 'sex') {
    userSotre.changeBaseInfo({
      key,
      value: e === '男' ? 1 : 0,
    })
    return
  }
}

function item(key: string) {
  return key === 'sex'
    ? userBaseInfos.sex
      ? '男'
      : '女'
    : (userBaseInfos as any)[key]
}

let userInfoKeys = computed(() => {
  return Object.keys(userBaseInfos)
})

let userRandomInfoKeys = computed(() => {
  let list = ['username', 'nickname', 'location', 'sign']
  return userInfoKeys.value.filter((val) => {
    return list.includes(val)
  })
})

let userSelectInfoKeys = computed(() => {
  let list = ['sex', 'education', 'university']
  return userInfoKeys.value.filter((val) => {
    return list.includes(val)
  })
})

let selectInfoItemListMap = computed(() => {
  return new Map([
    ['sex', ['男', '女']],
    // TODO: names
    ['education', []],
    ['university', []],
  ])
})
</script>

<style lang="scss" scoped>
$w: var(--userNormalInfoEditWidth);

.user-normal-info-wrapper {
  box-sizing: border-box;
  flex-grow: 1;
  width: $w;
  background-color: white;

  h2,
  .user-info-list {
    padding: calc($w * 0.015) calc($w * 0.04);
  }

  h2 {
    line-height: 2;
    font-size: calc($w * 0.024);
    font-weight: bold;
    color: var(--black);
    border-bottom: 1px solid var(--light);
  }

  .user-info-list {
    li {
      height: calc($w * 0.08);
      line-height: calc($w * 0.08);
      display: flex;
      align-items: center;

      p {
        width: 25%;
        font-size: calc($w * 0.022);
        color: var(--black);
        text-align: left;
      }

      .sign-input {
        --w: calc($w * 0.7);
        --h: calc($w * 0.04);
        --fs: calc($w * 0.02);
      }

      .item-select {
        --itemSelectWidth: calc($w * 0.3);
        --itemSelectHeight: calc($w * 0.04);
        --itemSelectFontsize: calc($w * 0.02);
      }
    }
  }
}
</style>
